<template>
	<view class="content">
		<view class="form-wrap">
			<view class="form-title">筛选条件</view>
			<view class="form-item">
				<view class="label">
					<text class="title">所在地</text>
				</view>
				<view class="value">
					<picker @change="citySelector" :value="cityIndex" :range="cityList" range-key="label">
						<view>{{cityList[cityIndex].label}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			
			<view class="form-item">
				<view class="label">
					<text class="title">性别</text>
				</view>
				<view class="value">
					<picker @change="sexSelector" :value="sexIndex" :range="sexList" range-key="label">
						<view>{{sexList[sexIndex].label}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			
			<view class="form-item">
				<view class="label">
					<text class="title">年龄范围</text>
				</view>
				<view class="value">
					<picker mode="multiSelector" @columnchange="ageColumnChange" :value="ageIndex" :range="ageList">
						<view v-if="ageIndex[0] != 0 && ageIndex[1] != 0">{{ageList[0][ageIndex[0]]}}~{{ageList[1][ageIndex[1]]}}</view>
						<view v-else>请选择年龄范围</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityList from "@/common/area-code.js";
	
	export default {
		data() {
			return {
				myInfo: {},
				form: {
					pcode: '',
					min_age: '',
					max_age: '',
					min_height: '',
					max_height: '',
					education: '',
					income: '',
					sex:''
				},
				sexIndex:0,  //选择的性别值
				sexList:[
					{
						label: '请选择',
						value: ''
					},{
						label: '男',
						value: '1'
					},{
						label: '女',
						value: '2'
					}],
				cityList:cityList,
				cityIndex: 0,
				ageList: [
					['最小年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70],
					['最大年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70]
				],
				ageIndex: [0, 0],
			}
		},
		onLoad(options) {
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
					if (!!this.myInfo.is_request) {
						console.log('用户筛选',this.myInfo.is_request)
						this.form.pcode = this.myInfo.is_request.pcode;
						for (let i = 0; i < this.cityList.length; i++) {
							if (this.form.pcode == this.cityList[i].value) {
								this.cityIndex = i
							}
						}
						this.form.min_age = this.myInfo.is_request.min_age;
						this.form.max_age = this.myInfo.is_request.max_age;
						for (let j = 0; j < this.ageList[0].length; j++) {
							if (this.form.min_age == this.ageList[0][j]) {
								this.ageIndex[0] = j
							}
							if (this.form.max_age == this.ageList[0][j]) {
								this.ageIndex[1] = j
							}
						}
						
					}
				}
			} catch (e) {
				console.warn(e)
			}
			
			if(options.sex!=""){
				this.sexIndex=parseInt(options.sex);
				this.form.sex = this.sexIndex
			}
			
		},
		onReady() {
			
		},
		onNavigationBarButtonTap(e) {
			if (this.form.pcode == '') {
				uni.showToast({
					title: '请选择所在地',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			// if (this.form.min_age == '' || this.form.min_age == '最小年龄' || this.form.max_age == '' || this.form.min_age == '最大年龄') {
			// 	uni.showToast({
			// 		title: '请选择年龄范围',
			// 		position: 'bottom',
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			uni.showLoading({
				title: '',
			});
			this.form.method = 'V1.UserRequirement';
			this.form.uid = this.myInfo.id;
			this.form.token = this.myInfo.token;
			console.log('用户必选',this.form)
			this.$api.api.ajaxData(this.form, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					uni.setStorage({
						key: 'myInfo',
						data: this.myInfo,
						success: function() {
							console.log('myInfo.is_request已更新');
						}
					})
					uni.$emit('home-page', {
						type: 'filter',
						filter: this.cityList[this.cityIndex].label,
						sex:this.sexList[this.sexIndex].value
					})
					uni.navigateBack({
						delta: 1
					})
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		methods: {
			sexSelector: function (e) {
				this.sexIndex = e.target.value
				if (this.sexIndex != 0) {
					this.form.sex = this.sexIndex
				}
			},
			
			citySelector: function (e) {
				this.cityIndex = e.target.value
				this.form.pcode = this.cityList[this.cityIndex].value
				if (!!this.myInfo.is_request) {
					this.myInfo.is_request.pcode = this.form.pcode;
				} else {
					this.myInfo.is_request = {
						pcode: this.form.pcode
					}
				}
			},
			
			ageColumnChange: function(e) {
				this.ageIndex.splice(e.detail.column, 1, e.detail.value)
				switch (e.detail.column) {
					case 0:
						if (this.ageIndex[0] > this.ageIndex[1]) {
							this.ageIndex.splice(1, 1, e.detail.value)
						}
						break;
					case 1:
						if (this.ageIndex[1] < this.ageIndex[0]) {
							this.ageIndex.splice(0, 1, e.detail.value)
						}
						break;
				}
				this.form.min_age = this.ageList[0][this.ageIndex[0]];
				this.form.max_age = this.ageList[1][this.ageIndex[1]];
				if (!!this.myInfo.is_request) {
					this.myInfo.is_request.min_age = this.form.min_age;
					this.myInfo.is_request.max_age = this.form.max_age;
				} else {
					this.myInfo.is_request = {
						min_age: this.form.min_age,
						max_age: this.form.max_age
					}
				}
				
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.content {
		margin-top: 1rpx;
	}
	.form-wrap {
		padding: 0 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
		.form-title {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 30rpx;
			position: relative;
			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 24rpx;
				background-color: #ED4574;
				border-radius: 10rpx;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -12rpx;
			}
		}
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			border-top: 1rpx solid #efefef;
			.label {
				.title {
					color: #000;
					font-size: 28rpx;
				}
				.tips {
					color: #666;
					font-size: 28rpx;
				}
			}
			.value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: #888;
				input {
					font-size: 28rpx;
					padding-right: 0;
					text-align: right;
				}
			}
			.uni-icon-arrowright {
				font-size: 28rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}
</style>
